<template>
  <div>44444444----------{{ mouse.x }}------{{ mouse.y }}</div>
</template>

<script setup>
// 1.当页面挂载完之后,注册一个鼠标移入事件
// 2.事件后面的回调函数,可以通过事件对象获取到鼠标的对应坐标
// 3.将获取到的坐标保存起来,响应式的渲染到页面当中
import { onMounted, ref } from "vue";
const mouse = ref({
  x: 0,
  y: 0,
});
// const move = (e) => {
//   console.log(e.pageX, e.pageY);
//   mouse.value.x = e.pageX;
//   mouse.value.y = e.pageY;
// };
// onMounted(() => {
//   document.addEventListener("mousemove", move);
// });
onMounted(() => {
  document.addEventListener("mousemove", (e) => {
    // console.log(e.pageX, e.pageY);
    mouse.value.x = e.pageX;
    mouse.value.y = e.pageY;
  });
});
</script>

<style></style>
